<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局部注册</title>
    <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
    <div id="app">
        <parent-component></parent-component>
        <!-- <my-demo></my-demo> -->
    </div>
    <script src="../../2.1.8/vue.js"></script>
    <script>
    /*
        需要强调的是 组价无论是全局还是局部，包括组件嵌套都必须有根节点，且唯一
    */
        var Child = Vue.extend({
            template : '<p>I am child，我是子组件</p>',
            // replace : true
        });
        var Parent = Vue.extend({
            // root-node 根节点
            template : `<div class="root-node">
                <p>I am parent，我是父组件</p>
                <child-component></child-component>
            </div>`,
            components : {
                'child-component' : Child
            }
        });

        var Demo = Vue.extend({
            components : {
                'my-demo' : {
                    template : '<p>hello world!</p>'
                }
            }
        });
        // console.log( Demo )

        let vm = new Vue({
            el : '#app',
            components : {
                'parent-component' : Parent
            }
        });






    </script>
</body>
</html>